<template>
  <edit-dialog :centerDialogVisible="visible" :tilte="tilte" :default-button="false" @Cancel="handleCancel" :width="width"
    class="addform">
    <template #content>
      <div>
        <el-form ref="maintenanceRef" :rules="rules" :model="addForm" label-width="110px" :inline="true">
          <!-- 紧急状况 -->
          <el-form-item label="紧急状况" prop="urgency">
            <el-select coordinateholder="请选择" style="width: 260px" v-model="addForm.urgency">
              <el-option v-for="item in urgency" :label="item.label" :value="item.value" :key="item.value" />
            </el-select>
          </el-form-item>
          <!-- 维修名称 -->
          <el-form-item label="维修名称" prop="repName">
            <el-input placeholder="请输入维修名称" style="width: 260px" v-model="addForm.repName" 
              show-word-limit></el-input>
          </el-form-item>
          <!-- 设备类型 -->
          <el-form-item label="设备类型" prop="eqptTypeId">
            <!-- <el-select coordinateholder="请选择" style="width: 260px" v-model="addForm.eqptTypeId" @change="purge"> -->
            <!-- <el-option v-for="item in eqptTypeId" :label="item.label" :value="item.value"  /> -->
            <el-tree-select v-model="addForm.eqptTypeId" check-strictly :data="eqptTypeId" :render-after-expand="false"
              style="width: 260px" @change="geteqpttypeId(maintenanceRef)" />
            <!-- </el-select> -->
          </el-form-item>
          <!-- 其他设备类型 -->
          <el-form-item label="其他设备类型" :prop="addForm.eqptTypeId == '0' ? 'eqptTypeOtr' : ''" >
            <el-input style="width: 260px"  show-word-limit placeholder="当设备类型为其他时,必填"
              v-model="addForm.eqptTypeOtr" :disabled="addForm.eqptTypeId == '0' ? false : true"> </el-input>
          </el-form-item>
          <br>
          <!-- 设备编号 -->
          <el-form-item label="设备编号" prop="eqptCode">
            <el-input v-if="addForm.eqptTypeId == '0'" style="width: 260px"  show-word-limit
              placeholder="请输入设备编号" v-model="addForm.eqptCode">
            </el-input>
            <el-select v-else placeholder="请选择设备编号" v-model="addForm.eqptCode" style="width: 260px" @change="getCoses">
              <el-option v-for="item, in eqptCodes" :label="item.label" :value="item.value" :key="item" />
            </el-select>
          </el-form-item>
          <!-- 设备型号 -->
          <el-form-item label="设备型号" prop="eqptModel">
            <el-select placeholder="根据所选设备自动填充或手动输入" v-model="addForm.eqptModel" style="width: 260px" disabled
              v-if="addForm.eqptTypeId !== '0'">

            </el-select>
            <el-input style="width: 260px"  show-word-limit v-model="addForm.eqptModel"
              placeholder="请输入设备型号" v-else> </el-input>
          </el-form-item>
          <!-- 供应商 -->
          <el-form-item label="供应商" prop="eqptSupplier">
            <el-select placeholder="根据设备位置自动填充" v-model="addForm.eqptSupplier" style="width: 260px" disabled
              v-if="addForm.eqptTypeId !== '0'">

            </el-select>
            <el-input style="width: 260px"  show-word-limit placeholder="请输入供应商"
              v-model="addForm.eqptSupplier" v-else> </el-input>
          </el-form-item>
          <!-- 航站楼 -->
          <el-form-item label="航站楼" prop="terminal">
            <el-radio-group class="ml-4" v-model="addForm.terminal">
              <el-radio v-for="item in terminals" :label="item.value" size="small">{{ item.label }}</el-radio>
            </el-radio-group>
          </el-form-item>
          <br>
          <!-- 地点 -->
          <el-form-item label="地点" prop="coordinate" style="position: relative;" :rules="[
            {
              required: true,
              trigger: 'change',
              validator: getValodatorplanAcceptTime,
            },
          ]">
            <el-input style="width:  260px" maxlength="50"
              placeholder="根据所选设备自动填充或地图点选" v-model="coordinatevite"
              @blur="coordinateInput" disabled></el-input>
            <img class="coordinate_img" @click.stop="mapcoor()" src="@/assets/images/point.png" alt="">
          </el-form-item>
          <!-- 楼层 -->
          <el-form-item label="楼层" prop="eqptFloor">
            <el-select placeholder="请选择楼层" style="width: 255px" v-model="addForm.eqptFloor">
              <el-option v-for="item in eqptFloors" :label="item.label" :value="item.value" :key="item.value" />
            </el-select>
          </el-form-item>
          <!-- 区域 -->
          <el-form-item label="区域" prop="region">
            <el-input placeholder="根据所选设备自动填充或手动输入" style="width: 255px"
              :disabled="addForm.eqptTypeId == '0' ? false : true" v-model="addForm.region"></el-input>
          </el-form-item>
          <!-- 问题类型 -->
          <el-form-item label="问题类型" prop="problemId">
            <el-select placeholder="请选择" style="width: 655px" v-model="addForm.problemId">
              <el-option v-for="item in problemId" :label="item.label" :value="item.value" :key="item.value" />
            </el-select>
          </el-form-item>
          <!-- 问题描述 -->
          <el-form-item label="问题描述" prop="problemDesc">
            <el-input style="width: 655px;" type="textarea" :autosize="{ minRows: 2, maxRows: 4 }" show-word-limit
              maxlength="500" v-model="addForm.problemDesc" placeholder="请输入问题描述"> </el-input>
          </el-form-item>
          <!-- 图片 -->
          <!-- action="/fast/uploadFile"  -->
          <el-form-item label="图片：" class="upload-img" prop="files" :class="filelist.length >= 10 ? 'div' : ''"
            ref="uploadRef" :rules="[
              {
                required: true,
                trigger: 'change',
                validator: getfiles,
              },
            ]">
            <el-upload v-model:file-list="filelist" :action="baseGeneralPath + '/fast/uploadFile'" method="post"
              list-type="picture-card" class='hide' limit="10" :on-preview="handlePictureCardPreview"
              :on-success="handlerUploadSuccess" :on-exceed="handleExceed" :before-upload="handlerBeforeUpload"
              @change="filelists()" :on-remove="handleRemove">
              <el-icon>
                <Plus />
              </el-icon>
            </el-upload>
            <el-dialog align-center width="auto" center v-model="dialogVisible">
              <div>
                <img w-full :src="dialogImageUrl" alt="Preview Image" />
              </div>
            </el-dialog>
          </el-form-item>
          <!-- 归属问题 -->
          <el-form-item label="问题归属" prop="organType">
            <div class="my-4 flex items-center text-sm">
              <el-radio-group class="ml-4" v-model="addForm.organType" @change="organTypes">
                <el-radio label="1" size="small">内部单位</el-radio>
                <el-radio label="2" size="small">外部单位</el-radio>
              </el-radio-group>
            </div>
            <!-- multiple -->
          </el-form-item>
          <!-- 上报至 -->
          <el-form-item label="上报至" prop="organId" style="margin-left: 85px;">
            <el-tree-select placeholder="请选择" default-expand-all style="width: 255px" v-model="addForm.organId"
              :data="organId" :render-after-expand="false" />
          </el-form-item>
          <!-- 期望修复时间 -->
          <el-form-item label="期望修复时间" prop="expRepTime">
            <el-input-number @change="expRepTime" v-model="numTime" :max="times == 'H' ? '24' : '1000'"
              :min="0"></el-input-number>
            <el-select v-model="times" placeholder="Select" style="width: 80px;" @change="expRepTime">
              <el-option label="天" value="D" />
              <el-option label="小时" value="H" />
            </el-select>
            <!-- <el-date-picker v-model="addForm.expRepTime" type="datetime" placeholder="请选择期望修复时间" style="width: 255px"
              @change="time" /> -->
          </el-form-item>
          <!-- 维修方式-->
          <el-form-item label="维修方式" prop="repType">
            <el-radio-group class="ml-4" v-model="addForm.repType">
              <el-radio label="1" size="small">{{ '后续维修' }}</el-radio>
              <el-radio label="2" size="small">{{ '立行立改' }}</el-radio>
            </el-radio-group>
          </el-form-item>
          <!-- 备注 -->
          <el-form-item label="备注" prop="remarks">
            <el-input style="width: 655px;" type="textarea" :autosize="{ minRows: 2, maxRows: 4 }" show-word-limit
              maxlength="500" v-model="addForm.remarks"> </el-input>
          </el-form-item>
        </el-form>
      </div>
    </template>
    <template #custom>
      <span class="dialog-footer">
        <el-button class="buttonCancel" @click="handleCancel">取消</el-button>
        <el-button type="primary" class="btn-ok" @click="handleAddSubmit(maintenanceRef)"
          :loading="loading">确定</el-button>
      </span>
    </template>
  </edit-dialog>
  <!-- 地图弹框 -->
  <map-item :visible="mapitemDialogVisible" @confirm="mapConfirm" @cancel="cancel" @showAdd="handleShowAdd"
    ref="testcomRef"></map-item>
</template>

<script setup lang="ts">
import { ref, reactive, watch, provide, nextTick } from 'vue'
import { getProblem, getdevive, getcompanys, addrepair } from '@/api/requst/management'
import editDialog from '@/components/editDialog/index.vue'
import mapItem from './map.vue'
import { useStore } from 'vuex'
import { ElMessage, dayjs } from 'element-plus'
import { baseUrlConfig } from '@/config/config'
import type { FormInstance, FormRules, UploadProps, UploadUserFile } from 'element-plus'
import { deleteFile } from '@/api/common'
import store from '@/store'
import { useRouter } from 'vue-router'
import { dataTool } from 'echarts'
const tilte = ref('新增报修申请')
const loading = ref(false)
const goodsFile = ref<Array<any>>([])
const emit = defineEmits(['cancel'])
const width = ref('900px')
const hideUpload = ref(false)
const testcomRef = ref()
const maintenanceRef = ref()
const filelist = ref<any[]>([])
const baseGeneralPath = baseUrlConfig.businessBaseUrl
const times = ref('D')
const uploadRef = ref()
const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
  info: {
    type: Object,
    default: () => null,
  },
})

/**
 * 取消
 */
const handleCancel = () => {
  //清空绑定值
  addForm.urgency = '',
    addForm.eqptTypeId = '',
    addForm.eqptTypeOtr = '',
    addForm.eqptCode = '',
    addForm.eqptModel = '',
    addForm.eqptSupplier = '',
    addForm.coordinate = '',
    addForm.region = '',
    addForm.problemId = null,
    addForm.problemDesc = '',
    addForm.files = [],
    addForm.organType = '',
    addForm.organId = '',
    addForm.remarks = '',
    addForm.repName = '',
    addForm.eqptFloor = '',
    addForm.terminal = '',
    addForm.expRepTime = '',
    addForm.repType = '',
    numTime.value = 0
  coordinatevite.value = ''

  filelist.value = []
  emit('cancel')
}

const delFile = (code: string) => {
  deleteFile(code).then(res => {
  })
}
//期望修复时间
const numTime = ref(0)
const expRepTime = () => {
  addForm.expRepTime = ''
  if (times.value == 'D') {
    addForm.expRepTime = dayjs(Number(new Date) + (numTime.value * 24 * 60 * 60 * 1000)).format("YYYY-MM-DD HH:mm:ss")
  } else if (times.value == 'H') {
    addForm.expRepTime = dayjs(Number(new Date) + (numTime.value * 60 * 60 * 1000)).format("YYYY-MM-DD HH:mm:ss")
  }
}

// 图片
// 超出警告框
const handleExceed: UploadProps['onExceed'] = () => {
  ElMessage.error('上传文件数不能超过10个')
}

const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
  // console.log(uploadFile, uploadFiles)
  const code = uploadFile.response?.data?.enclosureCode
  delFile(code)
  hideUpload.value = false
  const values: Array<FileFace> = []
  goodsFile.value.forEach((item, index) => {
    if (item.enclosureCode !== code) {
      values.push(item)
    }
  })
  goodsFile.value = values
}




// 上传前
const handlerBeforeUpload: UploadProps['beforeUpload'] = (rawFile) => {
  // console.log(rawFile)
  const fileSuffix = rawFile.name.substring(rawFile.name.lastIndexOf('.') + 1)
  const whiteList = ['jpg', 'png', 'JPG', 'PNG']
  if (whiteList.indexOf(fileSuffix) === -1) {
    ElMessage.error('上传文件类型只能是 jpg,png格式')
    return false
  }
  if (rawFile.size > 10 * 1024 * 1024) {
    ElMessage.error('文件大小只能在10M以内')
    return false
  }
}

//上传成功
interface FileFace {
  enclosureContent: string
  enclosureName: string
  enclosureSuffix: string
  resourceAddress: string
  enclosureCode: string
}
const handlerUploadSuccess: UploadProps['onSuccess'] = (resp, uploadFile, uploadFiles) => {
  // console.log(resp, uploadFile, uploadFiles)
  if (resp.code === '1') {
    const item: FileFace = {
      enclosureContent: resp.data.enclosureCode,
      enclosureName: resp.data.enclosureName,
      enclosureSuffix: resp.data.enclosureSuffix,
      resourceAddress: resp.data.resourceAddress,
      enclosureCode: resp.data.enclosureCode
    }
    goodsFile.value.push(item)
    console.log(goodsFile.value);
    (addForm.files as any[]) = goodsFile.value
    if (goodsFile.value.length >= 3) {
      hideUpload.value = true
    }
  }
}
// const handleAvatarSuccess = () => {

// }
// const beforeAvatarUpload = () => {

// }
const rules = reactive({
  // urgency: [
  //   { required: true, message: '请选择紧急状况', trigger: 'blur' },
  //   // { max: 50, message: '最大长度50', trigger: 'blur' }
  // ],

  eqptTypeId: [
    { required: true, message: '请选择设备类型', trigger: 'change' },
  ],
  eqptCode: [
    { required: true, message: '请输入设备编号', trigger: 'blur' },
    { max: 50, message: '最大长度50', trigger: 'blur' }
  ],
  // coordinate: [
  //   { required: true, message: '请输入地点', trigger: 'blur' },
  // ],
  region: [
    { required: true, message: '请输入区域', trigger: 'blur' },
  ],
  problemId: [
    { required: true, message: '请选择问题类型', trigger: 'change' },
  ],
  problemDesc: [
    { required: true, message: '请输入问题描述', trigger: 'blur' },
  ],
  // files: [
  //   { required: true, message: '请选择图片', trigger: 'change' },
  //   {trigger: 'change',validator: getfiles,required: true,}
  // ],
  organType: [
    { required: true, message: '请选择问题归属', trigger: 'change' },
  ],
  organId: [
    { required: true, message: '请选择上报单位', trigger: 'change' },
  ],
  eqptTypeOtr: [
    { required: true, message: '请输入设备类型', trigger: 'blur' },
    { max: 50, message: '最大长度50', trigger: 'blur' }
  ],
  eqptModel: [
    { max: 50, message: '最大长度50', trigger: 'blur' }
  ],
  eqptSupplier: [
    { max: 50, message: '最大长度50', trigger: 'blur' }
  ],
  repName: [
    { required: true, message: '请输入维修名称', trigger: 'blur' },
    { max: 50, message: '最大长度50', trigger: 'blur' }
  ],
  eqptFloor: [
    { required: true, message: '请选择楼层', trigger: 'change' },
  ],
  terminal: [
    { required: true, message: '请选择航站楼', trigger: 'change' },
  ],
  // expRepTime: [
  //   { required: true, message: '请选择期望修复时间', trigger: 'change' },
  // ],
  repType: [
    { required: true, message: '请选择维修方式', trigger: 'change' },
  ]
})

let addForm = reactive({
  //紧急状况
  urgency: '',
  // 设备类型
  eqptTypeId: '',
  // 其他设备类型
  eqptTypeOtr: '',
  // 设备编号
  eqptCode: '',
  // 设备型号
  eqptModel: '',
  // 供应商
  eqptSupplier: '',
  // 地点
  coordinate: {},
  // 区域
  region: '',
  // 问题类型
  problemId: null,
  // 问题描述
  problemDesc: '',
  // 图片
  files: [],
  // 归属问题
  organType: '',
  // 上报至
  organId: '',
  // 备注
  remarks: '',
  // 维修名称
  repName: '',
  //楼层
  eqptFloor: '',
  // 航站楼
  terminal: '',
  // 期望修复时间
  expRepTime: '',
  //维修方式
  repType: '',
  // 登录信息
  creator: {
    id: '',
    name: '',
    organId: '',
    organName: '',
    phone: '',
  }
})




// 地图弹窗是否打开
const mapitemDialogVisible = ref(false)

//弹框点击消失
const cancel = () => {
  // addForm.coordinate = ''
  mapitemDialogVisible.value = false
}
const handleShowAdd = () => {
  // addForm.coordinate = ''
  mapitemDialogVisible.value = false
}
const coordinatevite = ref('')

//地图获取数据
const mapcoor = () => {
  if (addForm.eqptTypeId === '0') {
    coordinatevite.value = ''
    mapitemDialogVisible.value = true
  }
}

const mapConfirm = (loc: any) => {
  if (loc !== '') {
    addForm.coordinate = loc
    coordinatevite.value = `${addForm.coordinate?.longitude},${addForm.coordinate?.latitude}`
  }
  loc = ''
}

//手动输入
const coordinateInput = () => {
  if (coordinatevite.value) {
    addForm.coordinate = {
      latitude: coordinatevite.value.split(',')[1],
      longitude: coordinatevite.value.split(',')[0]
    }
  } else {
    addForm.coordinate = {},
      coordinatevite.value = ''
  }
}

watch(() => addForm.files, () => {
  if (addForm.files && addForm.files.length > 0) {

  }
})

//获取登录信息
const creator = () => {
  const login: any = JSON.parse(localStorage.getItem('CacheState'))
  // console.log('login', login.user.userInfo);
  addForm.creator = {
    id: login.user.userInfo.userId,
    name: login.user.userInfo.name,
    organId: login.user.userInfo.organId,
    organName: login.user.userInfo.organName,
    phone: login.user.userInfo.phone,
  }

}
creator()



const urgency = ref([
  { label: '非常紧急', value: '1' },
  { label: '一般紧急', value: '2' },
  { label: '一般', value: '3' }
])
//设备类型
let eqptTypeId = ref<any[]>([])
//问题类型
let problemId = ref([])
// 上报至
let organId = ref([])
//设备编号
let eqptCodes = ref([])
// 航站楼
let terminals = ref([])
//楼层
let eqptFloors = ref([])

//航站楼
watch(() => store.getters['repair/getTermianl'], (newVal) => {
  terminals.value = newVal
  //楼层
  eqptFloors.value = newVal[0].children
})
//格式化时间
const time = () => {
  addForm.expRepTime = dayjs(addForm.expRepTime).format('YYYY-MM-DD HH:mm:ss');
  // console.log(addForm.expRepTime);
}






//设备类型
const $store = useStore()
watch(() => $store.getters['repair/getEqptTypes'], (newVal) => {
  eqptTypeId.value = [...newVal, { label: '其他', value: '0' }]

  // eqptTypeId = newVal
})
// 设备类型选中事件
const geteqpttypeId = async (formEl: FormInstance | undefined) => {

  //清空规则
  if (!formEl) return
  formEl.resetFields('eqptTypeOtr')
  formEl.resetFields('eqptCode')
  formEl.resetFields('coordinate')
  formEl.resetFields('region')

  addForm.coordinate = {}
  addForm.eqptCode = ''
  addForm.eqptModel = ''
  addForm.eqptSupplier = ''
  coordinatevite.value = ''
  addForm.region = ''
  addForm.eqptTypeOtr = ''
  addForm.problemId = null



  //当类型为其他时
  if (addForm.eqptTypeId === '0') {
    await getProblem('').then((res: any) => {
      if (res.code === '1') {
        // console.log(res.data);
        problemId.value = res.data.map((item: any) => {
          return {
            label: item.problemType,
            value: item.problemId

          }
        })
      }
    })
  } else {
    await getProblem(addForm.eqptTypeId).then((res: any) => {
      if (res.code === '1') {
        // console.log(res.data);
        problemId.value = res.data.map((item: any) => {
          return {
            label: item.problemType,
            value: item.problemId
          }
        })
      }
    })
  }

  // 设备编号
  await getdevive(addForm.eqptTypeId).then((res: any) => {
    console.log(addForm.eqptTypeId, 'addForm.eqptTypeId');

    console.log(res, 'res');

    if (res.code === '1') {
      eqptCodes.value = res.data.map((item: any) => {
        return {
          ...item,
          label: item.eqptCode,
          value: item.eqptCode,
        }
      })
    }
  })
}

let filtere = ref<any[any]>([])
const getCoses = () => {
  filtere = eqptCodes.value.filter((item: any) => item.value === addForm.eqptCode)
  //设备型号
  addForm.eqptModel = filtere[0].eqptModel
  //地图
  coordinatevite.value = `${filtere[0].coordinate.longitude},${filtere[0].coordinate.latitude} `
  addForm.coordinate = filtere[0].coordinate
  // console.log(coordinates, '地点');
  //区域
  addForm.region = filtere[0].position || '区域'
  //供应商
  addForm.eqptSupplier = filtere[0].supplier

}



//归属问题
const organTypes = () => {
  addForm.organId = ''
  if (addForm.organType === '2') {
    //上报
    getcompanys().then((res: any) => {
      // console.log(res);

      if (res.code === '1') {
        organId.value = res.data.map((item: any) => ({
          ...item,
          label: item.companyName,
          value: item.companyId
        }))
      }
    })
  } if (addForm.organType === '1') {
    organId.value = $store.getters['user/getAllOrganTree']
  }
}



// const purge=()=>{
//   addForm.eqptTypeOtr=''
//   addForm.eqptModel=''
//   addForm.eqptSupplier=''
//   addForm.coordinate=''
// }
const dialogImageUrl = ref('')
const dialogVisible = ref(false)
const handlePictureCardPreview = (uploadFile: any) => {
  dialogImageUrl.value = uploadFile.url!
  dialogVisible.value = true
}
// const removeadd=()=>{

// }

//添加
const handleAddSubmit = async (formEl: any) => {
  if (!formEl) {
    return
  }
  await formEl.validate(async (valid: any) => {
    if (valid) {
      const res: any = addrepair(addForm)
      //弹框
      ElMessage.success('添加成功')
      // 清空地点
      // addForm.coordinate = ''
      dialogImageUrl.value = ''
      dialogVisible.value = false
      //清空绑定值
      addForm.urgency = '',
        addForm.eqptTypeId = '',
        addForm.eqptTypeOtr = '',
        addForm.eqptCode = '',
        addForm.eqptModel = '',
        addForm.eqptSupplier = '',
        addForm.coordinate = '',
        addForm.region = '',
        addForm.problemId = null,
        addForm.problemDesc = '',
        addForm.files = [],
        addForm.organType = '',
        addForm.organId = '',
        addForm.remarks = '',
        addForm.repName = '',
        addForm.eqptFloor = '',
        addForm.terminal = '',
        addForm.expRepTime = '',
        addForm.repType = '',
        numTime.value = 0
      coordinatevite.value = ''

      filelist.value = []
      // 弹窗消失
      emit('cancel')
      // addForm.files=[]


    }
  })
}

const getValodatorplanAcceptTime = (rule: any, value: any, callback: any) => {
  if (coordinatevite.value == '') {
    callback('地点不能为空')
  }
  if(String(coordinatevite.value).length>=50){
    callback('最大长度50')
  }
  if (!coordinatevite.value) {
    callback()
  }
  callback()
}

// const eqptTypeOtrs = (rule: any, value: any, callback: any) => {
//   if (addForm.eqptTypeId == '0') {
//     if (!addForm.eqptTypeOtr){
//       callback('请输入设备类型')
//     }
//   }
//   callback()
// }


const getfiles = (rule: any, value: any, callback: any) => {
  if (!filelist.value.length) {
    callback('请选择图片')
  }
  callback()
}

const filelists = async () => {
  if (!filelist.value.length) {
    uploadRef.value.clearValidate()
  }

}


//动态查询
const applyfind = () => {

}
</script>


<style scoped>
.hide {
  /deep/ .el-upload--picture-card {
    display: none;
  }
  .el-list-enter-active,
  .el-list-leave-active {
    transition: all 0s;
  }
  .el-list-enter,
  .el-list-leave-active {
    opacity: 0;
    transform: translateY(0);
  }
}
.upload-img {
  width: 100%;
}
.fl {
  position: absolute;
  bottom: 300px;
  right: 90px;
}

.div {
  /deep/.el-upload {
    display: none !important;
  }
}

.coordinate_img {
  width: 30px;
  height: 30px;
  position: absolute;
  top: 0;
  right: 0;
  cursor: pointer;
}
</style>